

<template>
    <div ref="container" :style="{ width: props.width + 'px', height: '100%' }"></div>
</template>
<script setup lang="ts" name="productLine">
import { ref, inject, onBeforeUnmount, defineProps } from 'vue';
const props = defineProps({
    hours: {
        type: Array,
        default: []
    },
    produced: {
        type: Array,
        default: []
    },
    selected: {
        type: Array,
        default: []
    },
    examined: {
        type: Array,
        default: []
    },
    delivered: {
        type: Array,
        default: []
    },
    height: {
        type: Number,
        default: 0
    },
    width: {
        type: Number,
        default: 0
    }
})
// 获取echart挂载的DOM节点
const container = ref();

// 赋值动态ref到变量
// const setItemRef = (el: any) => {
//     if (el) {
//         container.value = el
//     }
// }
// 定义延时器指针对象，便于组件实例销毁的时候以便清除
const timer = ref();

// 通过 inject 接收Echarts
const Echarts = inject('$echarts');
const getFontSize: any = inject('$getfontSize');

// 或
// 通过Vue全局注册方式获取
// const {proxy}: any = getCurrentInstance();


const initEchartsOneFn = () => {
    // echarts初始化
    const myChart = (Echarts as any).init(container.value);

    // 或
    // let myChart = proxy.$echarts.init(container.value);
    console.log(props)
    const option = {
        xAxis: {
            data: props.hours,
            axisLabel: {
                textStyle: {
                    color: "#fff",
                    fontSize: getFontSize(16),
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    width: 2,
                    color: "white",
                },
            },
        },

        yAxis: [
            {
                type: "value",
                axisTick: {
                    show: true,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 2,
                        color: "white",
                    },
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#fff",
                    },
                    // 默认x轴字体大小
                    fontSize: getFontSize(16),
                    // margin:文字到x轴的距离
                    margin: 15,
                },
                splitLine: {
                    show: true,
                    width: 0.5,
                    color: "white",
                    lineStyle: {
                        type: 'dashed'
                    }
                },
            },
        ],
        grid: {
            top: '5%',
            left: '10%',
            right: '5%',
            bottom:'10%'
        },
        series: [
            {
                type: "line",
                stack: "all",
                data: props.produced,
                symbolSize: 8,
                symbol: "emptyCircle",
                lineStyle: {
                    width: 3,
                    color: "#db5995",
                },
                areaStyle: {
                    color: 'rgba(255,255,255, 0.1)',
                },
                itemStyle: {
                    normal: {
                        color: "#db5995",
                    },
                },
            },
            {
                type: "line",
                stack: "all",
                data: props.examined,
                symbolSize: 8,
                symbol: "emptyCircle",
                lineStyle: {
                    width: 2,
                    color: "#4d9fc5",
                },
                areaStyle: {
                    color: 'rgba(255,255,255, 0.1)'
                },
                itemStyle: {
                    normal: {
                        color: "#4d9fc5",
                    },
                },
            },
        ]

    }

    myChart.setOption(option);

    // 根据页面大小自动响应图表大小
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

// 判断定时器是否存在
if (timer.value) {
    clearTimeout(timer.value);
}

// 绑定定时器，销毁的时候再次清除
timer.value = setTimeout(() => initEchartsOneFn(), 1000);

// 组件实例销毁前清除延时器对象
onBeforeUnmount(() => {
    if (timer.value) clearTimeout(timer.value);
});
</script>

<style scoped >
.chart {
    margin: 0 auto;
}
</style>


<style >
.chart canvas {
    margin-left: 2%;
}
</style>

